<template>
	<view class="hui">
		<u-navbar leftIconColor="black" :autoBack="true" title="订单列表" titleStyle="color:black" :placeholder="true"
			bgColor="#fff">
		</u-navbar>
		<view class="tab_box b_flex_c_s">
			<u-tabs :current="current" :list="tab" @click="click" lineColor="#3C7CFF" lineWidth="40"
				:activeStyle="{color:'#3C7CFF',fontWeight:'bold'}" :inactiveStyle="{color: '#9296AF'}"
				itemStyle='height:80rpx;width:200rpx;'></u-tabs>
		</view>
		<view class="list_box">
			<view class="info_box" v-for="(item,index) in list" :key="index">
				<view class="b_flex_c_s b_m_bs" @click="$project.toPath('/pages/lease/orderInfo?id='+item.id)">
					<view class="status">{{$project.setQuiltState(item.complete)}}</view>
					<view :class="['text',!item.complete?'b_green':'b_orange']">
						{{$project.setQuiltText(item.complete)}}
					</view>
				</view>
				<view class="b_flex b_m_bs" @click="$project.toPath('/pages/lease/orderInfo?id='+item.id)">
					<image class="img" :src="item.quilt.sliderImage"></image>
					<view class="n_box">
						<view class="b_flex_c_s">
							<view class="name">{{item.quilt.name}}</view>
							<view class="price"><span class="money">￥</span>{{item.quilt.price}}</view>
						</view>
						<view class="num">x{{item.num}}</view>
					</view>
				</view>
				<view class="sf">实付款￥{{item.price}}</view>
				<view class="b_flex_cc">
					<!-- <view class="lxkf button" @click="$project.toPhone()">联系客服</view>
					<view v-if="item.status=='待取货'" class="make button">确认提货</view> -->
					<!-- <view v-if="!item.complete" @click="complete(item)" class="make button">确认归还</view> -->
				</view>
			</view>
		</view>
		<empty v-if="emptyShow" text="暂无订单"></empty>
	</view>
</template>

<script>
	import empty from "@/components/empty.vue";
	import {
		deviceOrder,quiltComplete
	} from "@/require/api.js";
	export default {
		components: {
			empty
		},
		data() {
			return {
				current: 0,
				tab: [{
						name: '全部',
						val: ''
					},
					{
						name: '使用中',
						val: 0
					},
					{
						name: '已归还',
						val: 1
					}
				],
				params: {
					page: 1,
					limit: 10,
					status: '',
					materials: 'quilt'
				},
				list: [],
				emptyShow: false,
				total: ''
			}
		},
		onLoad(data) {
			if (data.status) {
				this.params.status = data.status;

				if (data.status == 1) this.current = 2;
				if (data.status == 0) this.current = 1;
			}
		},
		onShow() {
			this.$project.getNetwork();
			this.getList();
		},
		onReachBottom() {
			if (this.list.length < this.total) {
				this.params.page++;
				deviceOrder(this.params).then(res => {
					res.data.list.forEach((res) => {
						this.list.push(res);
					});
				});
			}
		},
		methods: {
			complete(item){
				let _ = this;
				uni.showModal({
					title: '确定要归还吗?',
					success(res) {
						if (res.confirm) {
							quiltComplete({id:item.id}).then(ress => {
								_.$project.toast(ress.message);
								_.getList();
							});
						}
					}
				})
			},
			async click(e) {
				this.params.page = 1;
				this.params.status = e.val;
				await this.getList();
			},
			async getList() {
				let {
					data
				} = await deviceOrder(this.params);
				if (data.list.length < 1 || !data.list) {
					this.emptyShow = true;
				} else {
					this.emptyShow = false;
				}
				this.list = data.list;
				this.total = data.total;
			}
		}
	}
</script>

<style lang="scss" scoped>
	.tab_box {
		background-color: #fff;
		box-sizing: border-box;
		padding: 10rpx 0;
	}

	.list_box {
		box-sizing: border-box;
		padding: 30rpx;
	}

	.info_box {
		background-color: #fff;
		width: 100%;
		border-radius: 15rpx;
		box-sizing: border-box;
		padding: 30rpx;
		margin-bottom: 30rpx;
	}

	.img {
		width: 142rpx;
		height: 142rpx;
		border-radius: 20rpx;
		margin-right: 20rpx;
	}

	.status {
		font-size: 30rpx;
		font-weight: 500;
		color: #252B50;
	}

	.text {
		font-size: 30rpx;
		font-weight: 500;
	}

	.name {

		font-size: 27rpx;
		font-weight: 500;
		color: #252B50;

	}

	.money {
		font-size: 24rpx;
	}

	.price {
		font-size: 30rpx;
		color: #252B50;
	}

	.num {
		text-align: right;
		font-size: 28rpx;
		font-weight: 500;
		color: #9296AF;
		margin: 20rpx 0 0 0;
	}

	.n_box {
		flex: 1;
	}

	.sf {

		font-size: 28rpx;

		font-weight: bold;
		color: #252B50;
		text-align: right;
		margin-bottom: 30rpx;
	}

	.button {
		width: 70%;
		height: 70rpx;
		line-height: 70rpx;
		border-radius: 32rpx;
		font-size: 30rpx;
		font-weight: 500;
		text-align: center;
		margin-left: 20rpx;
	}

	.lxkf {

		border: 2rpx solid #9296AF;

		color: #9296AF;


	}

	.make {
		border: 2rpx solid #3C7CFF;

		color: #3C7CFF;
	}
</style>